﻿@page "/Overview"
@inherits PmComponentBase

<PageTitle>@T("Overview")</PageTitle>

<div class="d-flex full-height">
    <MRow>
        <MCol Cols="2">
            <MNavigationDrawer Permanent Class="rounded-4" Style="height: calc(100vh - 120px); overflow: hidden;;width:100% !important">
                <div class="d-flex flex-column" style="align-items:center; overflow: auto; height: calc(100vh - 200px);">
                    <MList Class="pl-4 pr-4" style="width:100%">
                        <MListItemGroup Class="rounded-2"
                            @bind-Value="_selectedEnvId"
                            Mandatory
                            Color="#A3AED0">
                            @foreach (var env in _environments)
                            {
                                <MListItem Class="rounded-2 env-list" Value="env.Id" Dense OnClick="@(()=>GetClustersByEnvIdAsync(env.Id))">
                                <ItemContent>
                                    <MListItemIcon Class="d-flex align-center mr-0 mt-3">
                                        <SIcon Color="@env.Color" Size="12" IsDefaultToolTip="false">mdi-circle</SIcon>
                                    </MListItemIcon>
                                    <MListItemContent>
                                        <MListItemTitle>  
                                            <EllipsisText>@env.Name</EllipsisText>
                                        </MListItemTitle>
                                    </MListItemContent>
                                    @if (context.Active)
                                    {
                                        <MListItemIcon Class="d-flex align-center mt-3">
                                                <SButton OnClickStopPropagation Icon OnClick="()=>UpdateEnvAsync(env.Id)">
                                                <SIcon Size="18" Class="pencil" IsDefaultToolTip="false">mdi-pencil</SIcon>
                                            </SButton>
                                        </MListItemIcon>
                                    }
                                    </ItemContent>
                                </MListItem>
                            }
                        </MListItemGroup>
                    </MList>
                </div>
                <SButton Color="" BorderRadiusClass="m-btn-add" OnClick="()=>ShowEnvModalAsync()" Style="height: 54px;" Tile Text Class="m-btn-add-environment">
                    <SIcon Left IsDefaultToolTip="false">mdi-plus</SIcon> <span class="emphasis--text">@T("Add Environment")</span>
                </SButton>
            </MNavigationDrawer>
        </MCol>
        <MCol Cols="10">
            <div class="d-flex flex-column" style="overflow: hidden;">
                <MRow NoGutters Align="AlignTypes.Center" Class="env-toolbar rounded-5" Style="height:88px; background:#fff;padding:0 12px;">
                    <MCard Style="padding-right: 150px;">
                        <MTabs @key="_clusters" @bind-Value="_selectEnvClusterId" Class="cluster-tabs" BackgroundColor="#fff" ShowArrows="@(true)" ActiveClass="cluster-tab-active" HideSlider>
                            @foreach (var cluster in _clusters)
                            {
                                StringNumber envClusterId = (StringNumber)cluster.EnvironmentClusterId;
                                <MTab Value="envClusterId">
                                    <MTooltip Top>
                                    <ActivatorContent>
                                        <div class="text-overflow" @attributes="@context.Attrs">@cluster.Name</div>
                                    </ActivatorContent>
                                    <ChildContent>
                                        <span>@cluster.Name</span>
                                    </ChildContent>
                                </MTooltip>
                                @if (cluster.EnvironmentClusterId == _selectEnvClusterId.AsT1)
                                {
                                        <SButton OnClickStopPropagation Icon OnClick="()=>UpdateClusterAsync(cluster.Id)">
                                        <SIcon Size="18" IsDefaultToolTip="false">mdi-pencil</SIcon>
                                    </SButton>
                                }
                                </MTab>
                            }
                        </MTabs>
                    </MCard>
                    <SButton Color="" BorderRadiusClass="m-btn-add" OnClick="()=>ShowClusterModalAsync()" Tile Text Class="m-btn-add-cluster" Style="height: 54px;">
                        <SIcon Left IsDefaultToolTip="false">mdi-plus</SIcon><span class="emphasis--text">@T("Add Cluster")</span>
                    </SButton>
                </MRow>
                <div class="d-flex flex-column justify-space-between" style="height: calc(100vh - 208px); overflow:hidden;">
                    <div class="mt-3" style="height:calc(100vh - 292px ); overflow: hidden; position: relative;">
                        <ProjectList @ref="_projectListComponent"
                                     Environment="@_environments.FirstOrDefault(e=>e.Id==_selectedEnvId)?.Name"
                                     FetchProjectCount="GetProjectCount"
                                     CanAddApp
                                     EnvironmentClusterId="_selectEnvClusterId.AsT1" />
                    </div>
                    <SButton Color="fill" Disabled=@(!_clusters.Any() || !_environments.Any()) Style="border-radius: 10px !important; background-color: #fff;" Height="54" OnClick="()=>ShowProjectModalAsync()" Tile>
                        <SIcon Left IsDefaultToolTip="false">mdi-plus</SIcon><span class="emphasis--text">@T("Add Project")</span>
                    </SButton>
                </div>
            </div>
        </MCol>
    </MRow>
</div>

<SSimpleModal ValueChanged="EnvModalValueChanged" Value="_envFormModel.Visible" Title="@(_envFormModel.HasValue ? $"{T("Edit Environment")}" : $"{T("Add Environment")}")" Width="770">
    <ChildContent>
        <MForm @ref="_envForm" Class="full-height" Context="formContext" EnableValidation Model="_envFormModel.Data">
             <div class="d-flex flex-column" style="width:100%; height:100%; overflow: hidden;">
            <div class="full-height" style="overflow: hidden;">
                <STextField TextColor="@_envFormModel.Data.Color" Class="mt-1" Outlined Label="@T("Name")" @bind-Value="_envFormModel.Data.Name"></STextField>
                <div class="mt-9">
                        <span style="color:#1B2559;font-size:14px;font-weight: 700;">@T("Select Color")</span>
                        <SColorGroup @bind-Value="_envFormModel.Data.Color" Style="margin-top:24px;" Colors="_colors"></SColorGroup>
                </div>
                <SAutoComplete Class="mt-9" 
                               @bind-Value="_envFormModel.Data.ClusterIds"
                               Items="_allClusters"
                               ItemText="r=>r.Name"
                               ItemValue="r=>r.Id"
                               Outlined
                               Label="@T("Relation cluster")"
                               Chips
                               Multiple>
                    <SelectionContent Context="_context">
                        <MChip Close
                               OnCloseClick="()=>_envFormModel.Data.ClusterIds.RemoveAll(lusterId=>lusterId == _context.Item.Id)"
                               Class="text-btn"
                               Small
                               TextColor="#05CD99"
                               Color="#E6FAF5">
                            @_context.Item.Name
                        </MChip>
                    </SelectionContent>
                    <ItemContent>
                        <MListItemContent>@context.Item.Name</MListItemContent>
                    </ItemContent>
                </SAutoComplete>
                <MTextarea NoResize Class="mt-9" Height="121" Outlined Label="@T("Description")" @bind-Value="_envFormModel.Data.Description"></MTextarea>
                @if (_envFormModel.HasValue)
                {
                    <MRow Class="mt-2">
                        <MCol Cols=6 Class="light-blue-color">@T("Creator"): @_envDetail.CreatorName</MCol>
                        <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                            @T("CreationTime"):&nbsp;
                            <DateTimeZone Value="_envDetail.CreationTime" />
                        </MCol>
                    </MRow>
                    <MRow Class="mt-6">
                        <MCol Cols=6 Class="light-blue-color">@T("Modifier"): @_envDetail.ModifierName</MCol>
                        <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                            @T("ModificationTime"):&nbsp;
                            <DateTimeZone Value="_envDetail.ModificationTime" />
                        </MCol>
                    </MRow>
                    <MRow Class="mt-6">
                        <MCol Cols=6 Class="light-blue-color">@T("ClusterCount"): @_envFormModel.Data.ClusterIds?.Count</MCol>
                    </MRow>
                }
            </div>
            <div class="d-flex align-end mt-9" style="width:100%;">
                @if (_envFormModel.HasValue)
                {
                    <SDeleteButton OnClick="RemoveEnvAsync"></SDeleteButton>
                }
                <MSpacer></MSpacer>
                <SButton Height="56" Color="primary" Width="140" OnClick="()=>SubmitEnvAsync(formContext)">@(_envFormModel.HasValue ? T("Save") : T("Submit"))</SButton>
                </div>
            </div>
        </MForm>
    </ChildContent>
</SSimpleModal>

<SSimpleModal ValueChanged="ClusterModalValueChanged" Value="_clusterFormModel.Visible" Title="@(_clusterFormModel.HasValue ? $"{T("Edit Cluster")}" : $"{T("Add Cluster")}")" Width="770">
    <ChildContent>
        <MForm Class="full-height" @ref="_clusterForm" Context="formContext" EnableValidation Model="_clusterFormModel.Data">
            <div class="d-flex flex-column" style="width:100%; height:100%;overflow: hidden;">
                <div class="full-height" style="overflow: hidden;">
                    <STextField Class="mt-1" Outlined Label="@T("Name")" @bind-Value="_clusterFormModel.Data.Name"></STextField>
                    <SAutoComplete Class="mt-9" @bind-Value="_clusterFormModel.Data.EnvironmentIds"
                                   Items="_allEnvs"
                                   ItemText="r=>r.Name"
                                   ItemValue="r=>r.Id"
                                              Outlined
                                   Label="@T("Relation environment")"
                                              Chips
                                              Multiple>
                        <SelectionContent Context="context">
                            <ColorChip Class="text-btn"
                                                  Close
                                       OnCloseClick="()=>_clusterFormModel.Data.EnvironmentIds.RemoveAll(envId=>envId==context.Item.Id)"
                                                  Small
                                       TextColor="@context.Item.Color">
                                @context.Item.Name
                            </ColorChip>
                        </SelectionContent>
                        <ItemContent>
                            <MListItemContent style="@($"color: {context.Item.Color} !important")">@context.Item.Name</MListItemContent>
                        </ItemContent>
                    </SAutoComplete>
                    <MTextarea Class="mt-9" Height="121" NoResize Outlined Label="@T("Description")" @bind-Value="_clusterFormModel.Data.Description"></MTextarea>
                    @if (_clusterFormModel.HasValue)
                    {
                        <MRow Class="mt-2">
                            <MCol Cols=6 Class="light-blue-color">@T("Creator"): @_clusterDetail.CreatorName</MCol>
                            <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                                @T("CreationTime"):&nbsp;
                                <DateTimeZone Value="_clusterDetail.CreationTime" />
                            </MCol>
                        </MRow>
                        <MRow Class="mt-6">
                            <MCol Cols=6 Class="light-blue-color">@T("Modifier"): @_clusterDetail.ModifierName</MCol>
                            <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                                @T("ModificationTime"):&nbsp;
                                <DateTimeZone Value="_clusterDetail.ModificationTime" />
                            </MCol>
                        </MRow>
                        <MRow Class="mt-6">
                            <MCol Cols=6 Class="light-blue-color">@T("ProjectCount"): @_projectCount</MCol>
                        </MRow>
                    }
                </div>
                <div class="d-flex align-end mt-9" style="width:100%;">
                    @if (_clusterFormModel.HasValue)
                    {
                        <SDeleteButton OnClick="RemoveClusterAsync"></SDeleteButton>
                    }
                    <MSpacer></MSpacer>
                    <SButton Height="56" Color="primary" Width="140" OnClick="()=>SubmitClusterAsync(formContext)">@(_clusterFormModel.HasValue ? T("Save") : T("Submit"))</SButton>
                </div>
            </div>
        </MForm>
    </ChildContent>
</SSimpleModal>
